<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <script type="text/babel">
    // 自定义组件 基础显示
    function Mytext() {
      let name = "景水"
      let age = 18
      let home = <a href="https://200.run"> 个人网站</a>
      return <h2>
        {home}
        {name}
        {age + 1}
        {"lovely".toUpperCase()}
      </h2>
    }
    // 自定义组件 - 条件渲染
    function MyCondition() {
      let flag = false
      let age = 19
      let gender = '男'
      let content
      if (gender === '男') {
        content = <i>先生</i>
      } else {
        content = <i> 女士</i>
      }

      return <h2>
        {flag ? 'aaaa' : "bbbb"}
        {age >= 18 ? "成年人" : "未成年人"}
        {content}
      </h2>
    }

    // 自定义组件-列表渲染
    function Mylist() {
      let arr = ['a', 'b', 'c', 1, 2, 3]
      let brr = []
      return <div>
        {arr}

        {brr.length && arr.map(item => item)}
        <ul>
          {arr.map(item => <li key={item}> {item} </li>)}
        </ul>
        {arr.map((item, index) => <h2 key={index}> {item} </h2>)}
      </div>
    }
    function MyApp() {
      let [count, setCount] = useState(0)
      const handleClick = () => setCount(count + 1);
      let num = 100
      // const obj = {
      //   color: 'red',
      //   backgroundColor:'gold'
      // }
      let xxx = 'c2'
      const func1 = () => {
        console.log('函数1')
      }
      return <>
        <h1
          xxx={num} className={xxx}
          onClick={func1}
          style={{ color: 'red', backgroundColor: 'gold' }}
        >水哥澎湃!</h1>
        <MyButton count={count} handleClick={handleClick} />
        <MyButton count={count} handleClick={handleClick} />
        <Mytext xxx={num} />
        <MyCondition />
        <Mylist />
      </>
    }

    const { useState } = React
    function MyButton(props) {
      const { count, handleClick } = props
      // useState是React内置的一个hook 函数
      // 下标为0的元素，是后续代码可以使用的 数据
      // 下标为1的元素，是后续修改数据的 方法

      // 数据不应该直接修改，只应该用配置的方法修改

      return <button onClick={handleClick}>统计点击:{count}</button>
    }

    // 浏览器DOM对象
    const container = document.getElementById('root');
    // 浏览器DOM对象转换成reactDOM对象
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);

    console.log(root);

  </script>

</body>

</html>